import React, { useCallback, useEffect, useState } from "react";
import {Button, Menu,Row,Col,Badge,Checkbox, Form, Input, message} from 'antd';
import { LockOutlined, UserOutlined,HomeOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
import {useStorage} from '../utils/hooks'
import request from '../utils/request';
import regCss from '../modlue.css/Reg.module.css'





// import '../App.scss'



import 'antd/dist/antd.css';

function Reg(){
    const navigate = useNavigate()
    const onFinish = useCallback( (values) => {
        console.log(666)
        async function userlist(){
            const {data} = await request.post('/user/reg', {          
                username: values.username,
                password: values.password,
            })

            if (data.code === 200) {
                navigate('/login')         
            }else{

            }
            }
            userlist()
    },[]);



    return(
        <>
        <header >
            <Row>
                <Col span={8}>
                    <div className={regCss.content}>
                        <a href="#">
                            <img src="/img/logo.login.png" alt="PosPal 银豹收银系统" />
                        </a>
                        <span style={{fontSize:'24px',color:'#666'}}>欢迎注册</span>
                    </div>

                </Col>
                <Col span={16} style={{textAlign:'right'}}>
                    <div className={regCss.menu} >
                        
                            <span>客服热线：400-806-6866</span>
                            <span><a href="#" >企业QQ：800008626  </a></span>
                            <span><a href="#">下载中心</a></span>
                            <span><a href="#">帮助中心</a></span>

                    </div>
                </Col>
                
                
            </Row>

  
        </header>
        <main>
            <div className={regCss.area}>
                <img className={regCss.login_img} src="/img/reg-bg.png" />
                <div className={regCss.regbox} style={{width:'320px',height:'420px'}}>
                    <h1>账号注册</h1>       
                    <div style={{paddingTop:20}}>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            >

                        

                            <Form.Item
                                // label="用户名"
                                name="username"
                                rules={[
                                {
                                    required: true,
                                    message: '请输入您的用户名!',
                                },
                                {
                                    // 自定义检验规则，检验用户名是否存在
                                    validator:
                                    async function(rule,value){       //rule:规则    value：输入框当前值
                                    // request发起请求向后端请求数据检验用户名是否存在     request请求本来就是返回promise对象？
                                   
                                    const {data} = await request.get('/user/check?username='+value)
                                        if(data.code === 200){
                                            return Promise.resolve();
                                        }else{
                                            return Promise.reject('用户名已存在');
                                        }
                                    },
                                    
                                }
                                ]}
                            >
                                <Input className={regCss.input_size} prefix={<HomeOutlined className="site-form-item-icon" />} placeholder="请输入账号" />
                            </Form.Item>

                            <Form.Item
                                // label="密码"
                                name="password"
                                rules={[
                                {
                                    required: true,
                                    message: '请输入您的密码!',
                                },
                                ]}
                            >
                                <Input
                                className={regCss.input_size}
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="请输入密码"
                                />
                            </Form.Item>


                            <Form.Item>
                                <Button htmlType="submit" type="primary" danger className={regCss.form_button}>
                                免费注册
                                </Button>
                            </Form.Item>
                            

                            {/* <Form.Item>
                                <Row>
                                <Col span={6}>
                                    <Button type='link'><Link to='#'>工号登录</Link></Button>
                                </Col>
                                <Col span={18} style={{textAlign:'right'}}>
                                    <Button type='link' style={{textAlign:'right'}}><Link to='reg' style={{color:'#999'}}>忘记密码？</Link></Button>
                                </Col>
                                </Row>    
                            </Form.Item> */}
                        
                            
                            
                        </Form>

                        <div className={regCss.item_registbox}>
                            <span style={{color:'#777'}}>已有账号?</span>
                            <Button type="link" ><Link to='/login'>去登录</Link></Button>
                        </div>
                    </div>
          

                   




                </div>
            </div>
          
        </main>
        <footer>
            <div className={regCss.dibu}>
                <Row>
                    <Col span={12} offset={7}>
                        <div className={regCss.ula}>
                            <a href="#">版本更新</a>
                            <a href="#">支持社区</a>
                            <a href="#">银豹博客</a>
                            <a href="#">渠道合作</a>
                            <a href="#">开放平台</a>
                            <a href="#">关于我们</a>
                            <a href="#" style={{borderRight:'none'}}>联系我们</a>
                        </div>
                    </Col>
                </Row>
            
           
            <p className={regCss.ftp}>2010-2017 © Copyright. Zhundong Network - All Rights Reserved</p>

            </div>
           
        </footer>
        </>
    )
}

export default Reg